<template>
	<view v-if="resultDetails" style="background: rgba(255, 227, 220, 1);">
		<template v-if="resultShow">
			<view style="position: relative;
		background: rgba(255, 227, 220, 1);min-height: 11500rpx;">
				<image class="result-img" :src="scloReportDetail[resultDetails.resultList[0].resultTitle]"
					mode="aspectFill" />
				<image :src="staticImgs.bottom_bg_1" class="bottom-bg-1" mode=""></image>
				<image :src="staticImgs.bottom_bg_2" class="bottom-bg-2" mode=""></image>
				<image :src="staticImgs.bottom_bg_3" class="bottom-bg-3" mode=""></image>
				<image :src="staticImgs.bottom_bg_4" class="bottom-bg-4" mode=""></image>
				<image :src="staticImgs.bottom_bg_5" class="bottom-bg-5" mode=""></image>

				<view class="center-box">
					<view class="canvas-box" :style="{backgroundImage:'url('+staticImgs.canvasLeidaBg+')'}">
						<view class="radar-canvas" v-if="showCanvas">
							<CommonChart type="radar" :chartData="RadarModel" background="none" canvasId="school_b"
								:animation="false" :canvas2d="isCanvas2d" :opts="{
						       dataLabel:true,
						       fontColor:'#333',
						       fontSize:14,
						       legend:{
						         show:false
						       },
						       extra:{
						         radar:{
						           gridType:'radar',
						           radius:90,
						           labelShow:true,
						           border:true,
						           gridCount:4,
						           axisLabel:false,
						           max:radarMax,
						         }
						       },
						     }" :resshow="delayload" />
						</view>
					</view>

					<image :src="staticImgs.mijiBg" class="miji-bg" mode=""></image>
					<view class="miji-content-box">
						<view class="miji-text">{{initHtmlText(resultDetails.resultList[1].modelDescList[3].modelDesc)}}
						</view>
						<image :src="staticImgs.anquanxuyaoBg" class="anquan-title-bg" mode=""></image>
						<view class="flex-between score-box">
							<view style="width: 100%;">
								<view class="my-score flex-cc" :style="{backgroundImage:'url('+staticImgs.scoreBg+')'}">
									我的得分{{resultDetails.resultList[1].score}}
								</view>
							</view>
							<view class="score-tip">总分区间1-5</view>
						</view>
						<view class="question-title">
							{{resultDetails.resultList[1].resultTitle}}
						</view>

						<view class="now-text flex-cc" :style="{backgroundImage:'url('+staticImgs.nowBg+')'}">
							{{resultDetails.resultList[1].resultDesc}}
						</view>
						<view class="miji-introduce">
							{{initHtmlText(resultDetails.resultList[1].modelDescList[2].modelDesc)}}
						</view>
					</view>


					<image :src="staticImgs.xiulianBg" class="miji-bg" mode="" style="margin-top: 324rpx;"></image>
					<view class="miji-content-box">
						<view class="miji-text">{{initHtmlText(resultDetails.resultList[2].modelDescList[3].modelDesc)}}
						</view>
						<image :src="staticImgs.shehuishiyingBg" class="anquan-title-bg" mode=""></image>
						<view class="flex-between score-box">
							<view style="width: 100%;">
								<view class="my-score flex-cc" :style="{backgroundImage:'url('+staticImgs.scoreBg+')'}">
									我的得分{{resultDetails.resultList[2].score}}
								</view>
							</view>
							<view class="score-tip">总分区间1-5</view>
						</view>
						<view class="question-title">
							{{resultDetails.resultList[2].resultTitle}}
						</view>

						<view class="now-text flex-cc" :style="{backgroundImage:'url('+staticImgs.nowBg+')'}">
							{{resultDetails.resultList[2].resultDesc}}
						</view>
						<view class="miji-introduce">
							{{initHtmlText(resultDetails.resultList[2].modelDescList[2].modelDesc)}}
						</view>
					</view>


					<image :src="staticImgs.xingfumijiBg" class="miji-bg" mode="" style="margin-top: 221rpx;"></image>
					<view class="miji-content-box">
						<view class="miji-text">{{initHtmlText(resultDetails.resultList[3].modelDescList[3].modelDesc)}}
						</view>
						<image :src="staticImgs.gongqingnengliBg" class="anquan-title-bg" mode=""></image>
						<view class="flex-between score-box">
							<view style="width: 100%;">
								<view class="my-score flex-cc" :style="{backgroundImage:'url('+staticImgs.scoreBg+')'}">
									我的得分{{resultDetails.resultList[3].score}}
								</view>
							</view>
							<view class="score-tip">总分区间1-5</view>
						</view>
						<view class="question-title">
							{{resultDetails.resultList[3].resultTitle}}
						</view>

						<view class="now-text flex-cc" :style="{backgroundImage:'url('+staticImgs.nowBg+')'}">
							{{resultDetails.resultList[3].resultDesc}}
						</view>
						<view class="miji-introduce">
							{{initHtmlText(resultDetails.resultList[3].modelDescList[2].modelDesc)}}
						</view>
					</view>

					<image :src="staticImgs.chengzhangshouceBg" class="miji-bg" mode="" style="margin-top: 171rpx;">
					</image>
					<view class="miji-content-box">
						<view class="miji-text">{{initHtmlText(resultDetails.resultList[4].modelDescList[3].modelDesc)}}
						</view>
						<image :src="staticImgs.zizunshuipingBg" class="anquan-title-bg" mode=""></image>
						<view class="flex-between score-box">
							<view style="width: 100%;">
								<view class="my-score flex-cc" :style="{backgroundImage:'url('+staticImgs.scoreBg+')'}">
									我的得分{{resultDetails.resultList[4].score}}
								</view>
							</view>
							<view class="score-tip">总分区间1-5</view>
						</view>
						<view class="question-title">
							{{resultDetails.resultList[4].resultTitle}}
						</view>

						<view class="now-text flex-cc" :style="{backgroundImage:'url('+staticImgs.nowBg+')'}">
							{{resultDetails.resultList[4].resultDesc}}
						</view>
						<view class="miji-introduce">
							{{initHtmlText(resultDetails.resultList[4].modelDescList[2].modelDesc)}}
						</view>
					</view>

					<image :src="staticImgs.qinggankoujueBg" class="miji-bg" mode="" style="margin-top: 187rpx;">
					</image>
					<view class="miji-content-box">
						<view class="miji-text">{{initHtmlText(resultDetails.resultList[5].modelDescList[3].modelDesc)}}
						</view>
						<image :src="staticImgs.qintingnengliBg" class="anquan-title-bg" mode=""></image>
						<view class="flex-between score-box">
							<view style="width: 100%;">
								<view class="my-score flex-cc" :style="{backgroundImage:'url('+staticImgs.scoreBg+')'}">
									我的得分{{resultDetails.resultList[5].score}}
								</view>
							</view>
							<view class="score-tip">总分区间1-5</view>
						</view>
						<view class="question-title">
							{{resultDetails.resultList[5].resultTitle}}
						</view>

						<view class="now-text flex-cc" :style="{backgroundImage:'url('+staticImgs.nowBg+')'}">
							{{resultDetails.resultList[5].resultDesc}}
						</view>
						<view class="miji-introduce">
							{{initHtmlText(resultDetails.resultList[5].modelDescList[2].modelDesc)}}
						</view>
					</view>

					<view class="bottom-bg-6" :style="{backgroundImage:'url('+staticImgs.bottom_bg_6+')'}">
						<view class="weilai-box" :style="{backgroundImage:'url('+staticImgs.weilaiBg+')'}">
							<view class="wb-title">
								{{resultDetails.resultList[1].dmnsName}}
							</view>
							<view class="wb-content flex-cc">
								{{initHtmlText(resultDetails.resultList[1].modelDescList[1].modelDesc)}}
							</view>
						</view>
						<view class="weilai-box" :style="{backgroundImage:'url('+staticImgs.weilaiBg+')'}">
							<view class="wb-title">
								{{resultDetails.resultList[2].dmnsName}}
							</view>
							<view class="wb-content flex-cc">
								{{initHtmlText(resultDetails.resultList[2].modelDescList[1].modelDesc)}}
							</view>
						</view>
						<view class="weilai-box" :style="{backgroundImage:'url('+staticImgs.weilaiBg+')'}">
							<view class="wb-title">
								{{resultDetails.resultList[3].dmnsName}}
							</view>
							<view class="wb-content flex-cc">
								{{initHtmlText(resultDetails.resultList[3].modelDescList[1].modelDesc)}}
							</view>
						</view>
						<view class="weilai-box" :style="{backgroundImage:'url('+staticImgs.weilaiBg+')'}">
							<view class="wb-title">
								{{resultDetails.resultList[4].dmnsName}}
							</view>
							<view class="wb-content flex-cc">
								{{initHtmlText(resultDetails.resultList[4].modelDescList[1].modelDesc)}}
							</view>
						</view>
						<view class="weilai-box" :style="{backgroundImage:'url('+staticImgs.weilaiBg+')'}">
							<view class="wb-title">
								{{resultDetails.resultList[5].dmnsName}}
							</view>
							<view class="wb-content flex-cc">
								{{initHtmlText(resultDetails.resultList[5].modelDescList[1].modelDesc)}}
							</view>
						</view>
					</view>
				</view>

				<view class="result-title flex-cc">{{resultDetails.resultList[0].resultTitle}}</view>
				<view class="result-score" :style="{backgroundImage:'url('+staticImgs.scoreGuangBg+')'}">
					<view>我的得分</view>
					<view class="result-score-num">{{resultDetails.resultList[0].score}}</view>
				</view>
				<image class="back-btn" @click="showResult(false)" :src="staticImgs.backBtn" />
			</view>

		</template>
		<view v-else class="share-container" @touchmove.stop.prevent>
			<image :src="resultImg" mode="widthFix" class="share-bg" show-menu-by-longpress />
			<!-- <view class="mask-bg"></view> -->
			<view class="result-btn-row flex-between">
				<image :src="staticImgs.leftIcon" class="result-decoration" />
				<image :src="staticImgs.resultBtn" class="result-btn" @click="showResult(true)" key="result-btn" />
				<image :src="staticImgs.rightIcon" class="result-decoration" />
			</view>
			<view class="download">
				<view class="download-text">长按保存</view>
				<image :src="staticImgs.downloadIcon" class="download-icon" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		clearHtmlText
	} from '@/common/utils/util.js'
	import {
		useDrawPoster
	} from '@/components/u-draw-poster'
	import CommonChart from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			CommonChart
		},
		props: {
			pageData: {
				type: Object,
				default: null
			},
			showCanvas: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				staticImgs: {
					bottom_bg_1: this.imgBaseURL + '/scl/result/goddess/bottom_bg_1.png',
					bottom_bg_2: this.imgBaseURL + '/scl/result/goddess/bottom_bg_2.png',
					bottom_bg_3: this.imgBaseURL + '/scl/result/goddess/bottom_bg_3.png',
					bottom_bg_4: this.imgBaseURL + '/scl/result/goddess/bottom_bg_4_new.png',
					bottom_bg_5: this.imgBaseURL + '/scl/result/goddess/bottom_bg_5_new.png',
					bottom_bg_6: this.imgBaseURL + '/scl/result/goddess/bottom_bg_6_new.png',

					resultTopBg: this.imgBaseURL + '/scl/result/goddess/result-top-bg.png',
					canvasLeidaBg: this.imgBaseURL + '/scl/result/goddess/canvas-leida-bg.png',
					weilaiBg: this.imgBaseURL + '/scl/result/goddess/wd-weilai-bg.png',
					nowBg: this.imgBaseURL + '/scl/result/goddess/now-bg.png',
					scoreBg: this.imgBaseURL + '/scl/result/goddess/weidu-score-bg.png',
					scoreGuangBg: this.imgBaseURL + '/scl/result/goddess/score-guang-bg.png',

					qintingnengliBg: this.imgBaseURL + '/scl/result/goddess/wd-qintingnengli.png',
					zizunshuipingBg: this.imgBaseURL + '/scl/result/goddess/wd-zizunshuiping.png',
					gongqingnengliBg: this.imgBaseURL + '/scl/result/goddess/wd-gongqingnengli.png',
					shehuishiyingBg: this.imgBaseURL + '/scl/result/goddess/wd-shehuishiying.png',
					anquanxuyaoBg: this.imgBaseURL + '/scl/result/goddess/wd-anquanxuyao.png',

					qinggankoujueBg: this.imgBaseURL + '/scl/result/goddess/wd-qinggankoujue.png',
					chengzhangshouceBg: this.imgBaseURL + '/scl/result/goddess/wd-chengzhangshouce.png',
					xingfumijiBg: this.imgBaseURL + '/scl/result/goddess/wd-xingfumiji.png',
					xiulianBg: this.imgBaseURL + '/scl/result/goddess/xiulian-bg.png',
					mijiBg: this.imgBaseURL + '/scl/result/goddess/miji-bg.png',

					defaultQrcode: this.imgBaseURL + '/scl/default_miniapp_qrcode_new.png',
					backBtn: this.imgBaseURL + '/scl/result/goddess/back-btn.png',
					resultBtn: this.imgBaseURL + '/scl/result/goddess/result-btn-new.png',
					downloadIcon: this.imgBaseURL + '/scl/result/goddess/download-new.png',
					leftIcon: this.imgBaseURL + '/scl/result/goddess/left.png',
					rightIcon: this.imgBaseURL + '/scl/result/goddess/right.png',
					mask: this.imgBaseURL + '/scl/result/goddess/mask.png'
				},
				resultDetails: undefined,
				imgBaseUrl: this.imgBaseURL,
				resultShow: false,
				resultImg: '',
				listData: [],
				RadarModel: [],
				radarMax: 5,
				scloReportDetail: null
			}
		},
		computed: {
			...mapGetters('user', ['clientUserUid', 'adType'])
		},
		watch: {
			pageData: {
				handler(val) {
					if (val) {
						const resultDetails = val.resultDetails
						this.resultDetails = resultDetails
						if (this.resultDetails.scloReportDetail) {
							this.scloReportDetail = JSON.parse(this.resultDetails.scloReportDetail);
						}
						this.initCanvas()
						this.initRandar()
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			initHtmlText(html) {
				return clearHtmlText(html)
			},
			initRandar() {
				let categoriesArr = []
				let tmpScoreArr = []
				this.resultDetails.resultSetMap.map(item => {
					categoriesArr.push(item.dmnsName)
					tmpScoreArr.push(Number(item.myScore))
				})
				this.RadarModel = {
					"categories": categoriesArr,
					"series": [{
						"name": "雷达图",
						"color": "#FEB069",
						"data": tmpScoreArr,
						"index": 0,
						"pointShape": "square",
						"show": true,
						"type": "radar",
						"labelShow": true,
					}, ]
				}
			},
			showResult(flag) {
				this.resultShow = flag
				if (!this.resultShow) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					})
				}
				this.$emit('posterLoadingCom', flag)
			},
			async initCanvas() {
				let jumpUrl = 'p=2@id=' + this.pageData.sclId
				this.resultImg = await this.createChipCanvas(this.resultDetails.resultList[0].resultPic, jumpUrl);
			},
			/**
			 * 绘制海报
			 */
			async createChipCanvas(imgUrl, jumpUrl) {
				console.log(jumpUrl, '-----------------imgUrl');
				const tmpScene = jumpUrl || 'r=5@id=' + this.clientUserUid
				const tmpPage = 'pages/index/index'
				let qrCode = this.staticImgs.defaultQrcode
				let imgD = ''
				
				const resSclInfo = await this.$u.api.getSclInfo({sclId:this.pageData.sclId})
				if(resSclInfo.data.data.url){
					qrCode = resSclInfo.data.data.url
				}else{
					const {
						data: dRes
					} = await this.$u.api.getQrcodeUrl({
						sceneStr: tmpScene,
						pageStr: tmpPage
					})
					
					if (dRes.success) {
						qrCode = dRes.data
					}
				}
				
				console.log(qrCode, '------#----qrCode')

				try {
					// 创建绘制工具
					const dp = await useDrawPoster({
						selector: 'dcanvas',
						loading: {
							create: '结果报告生成中...'
						},
						debug: true,
						width: 750,
						height: 1861
					})
					const w = dp.canvas.width
					const h = dp.canvas.height

					console.log(dp.canvas, '-----------dp.canvas-------')

					dp.draw(async (ctx) => {
						console.log(ctx, '-----------ctx')
						// 绘制背景图
						await ctx.drawImage(imgUrl, 0, 0, w, h)
						// 小程序二维码
						await ctx.drawRoundImage(qrCode, 138, 1663, 125, 125,
							100)
					})

					imgD = await dp.create()
				} catch (e) {
					console.log(e, '绘图')
				}
				console.log(imgD, '=========imgD')
				return imgD || imgUrl
			}
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			})
		},
		beforeDestroy() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.center-box {
		position: absolute;
		width: 100%;
		top: 1095rpx;
		left: 0;
	}

	.canvas-box {
		width: 746rpx;
		height: 931rpx;
		background-size: 100% 100%;
		margin: 0 auto;
		padding-top: 258rpx;
		box-sizing: border-box;
	}

	.radar-canvas {}

	.miji-bg {
		width: 593rpx;
		height: 241rpx;
		margin: 0 auto;
		margin-top: 53rpx;
		display: block;
	}

	.miji-text {
		width: 629rpx;
		font-size: 32rpx;
		color: #650F0F;
		line-height: 52rpx;
		letter-spacing: 3rpx;
		text-align: justify;
		margin: 0 auto;
	}

	.anquan-title-bg {
		width: 414rpx;
		height: 40rpx;
		margin: 0 auto;
		margin-top: 70rpx;
		display: block;
	}

	.score-box {
		margin-top: 41rpx;
	}

	.my-score {
		width: 244rpx;
		height: 106rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		letter-spacing: 4rpx;
		background-size: 100% 100%;
	}

	.question-title {
		width: 545rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #863535;
		line-height: 60rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 51rpx;
	}

	.score-tip {
		width: 100%;
		font-size: 30rpx;
		color: #650F0F;
		line-height: 52rpx;
		letter-spacing: 3rpx;
		text-align: center;
	}

	.now-text {
		width: 682rpx;
		height: 88rpx;
		font-weight: bold;
		font-size: 50rpx;
		color: #863535;
		line-height: 60rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 39rpx;
		background-size: 100% 100%;
	}


	.miji-content-box {
		width: 682rpx;
		min-height: 1104rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.47) 0%, rgba(247, 188, 187, 0.47) 100%);
		border-radius: 72rpx 0rpx 72rpx 26rpx;
		padding-top: 44rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 14rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}

	.miji-introduce {
		width: 629rpx;
		font-size: 32rpx;
		color: #650F0F;
		line-height: 52rpx;
		letter-spacing: 3rpx;
		text-align: justify;
		margin: 0 auto;
		margin-top: 40rpx;
	}


	.weilai-box {
		width: 611rpx;
		height: 152rpx;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: 30rpx;
		position: relative;
	}

	.wb-title {
		position: absolute;
		left: 40rpx;
		top: 9rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #7B1231;
		letter-spacing: 3rpx;
	}

	.wb-content {
		width: 100%;
		height: 100rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		letter-spacing: 3rpx;
		text-align: center;
		position: absolute;
		left: 0;
		top: 50rpx;
	}







	.result-title {
		width: 100rpx;
		height: 360rpx;
		font-size: 70rpx;
		font-weight: bold;
		color: #7F1919;
		letter-spacing: 20rpx;
		text-align: center;
		position: absolute;
		top: 178rpx;
		left: 76rpx;
	}

	.result-score {
		width: 198rpx;
		height: 182rpx;
		background-size: 100% 100%;
		font-weight: bold;
		font-size: 40rpx;
		color: #591A17;
		letter-spacing: 4rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 776rpx;
		left: 22rpx;
	}

	.result-score-num {
		margin-top: 4rpx;
		font-size: 80rpx;
	}




	.bottom-bg-1 {
		width: 750rpx;
		height: 1444rpx;
		margin-top: 299rpx;
		display: block;
	}

	.bottom-bg-2 {
		margin-top: 294rpx;
		width: 750rpx;
		height: 1929rpx;
		display: block;
	}

	.bottom-bg-3 {
		margin-top: -100rpx;
		width: 750rpx;
		height: 1715rpx;
		display: block;
	}

	.bottom-bg-4 {
		margin-top: -20rpx;
		width: 750rpx;
		height: 590rpx;
		display: block;
	}

	.bottom-bg-5 {
		margin-top: 1065rpx;
		width: 750rpx;
		height: 592rpx;
		display: block;
	}

	.bottom-bg-6 {
		width: 682rpx;
		height: 1344rpx;
		display: block;
		margin: 0 auto;
		margin-top: 76rpx;
		padding-top: 333rpx;
		box-sizing: border-box;
		background-size: 100% 100%;
	}





	@keyframes move {

		0%,
		50%,
		100% {
			transform: translateY(0);
		}

		25% {
			transform: translateY(50rpx);
		}

		75% {
			transform: translateY(-50rpx);
		}
	}

	@keyframes flash {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}
	}


	.result-container {
		padding-bottom: 160rpx;
	}

	.result-img {
		width: 100%;
		height: 1268rpx;
		display: block;
	}

	.back-btn {
		position: fixed;
		right: 0;
		top: 771rpx;
		width: 215rpx;
		height: 251rpx;
		animation: move 6s linear infinite;
	}

	.share-container {
		position: relative;
		// height: 1560rpx;
		height: 100vh;
	}

	.share-bg {
		width: 100%;
		min-height: 1500rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.mask-bg {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 480rpx;
		background-image: linear-gradient(180deg, rgba(255, 236, 229, 0) 0%, rgba(252, 188, 184, 0.84) 34%, rgba(229, 124, 125, 1) 100%);
		pointer-events: none;
	}

	.result-btn-row {
		position: absolute;
		bottom: 124rpx;
		left: 50rpx;
		right: 50rpx;
		pointer-events: none;
	}

	.result-btn {
		width: 360rpx;
		height: 70rpx;
		pointer-events: auto;
	}

	.result-decoration {
		width: 102rpx;
		height: 104rpx;
		pointer-events: none;
		animation: flash 1s linear infinite;
	}

	.download {
		position: absolute;
		bottom: 65rpx;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;

		.download-text {
			font-weight: bold;
			font-size: 29rpx;
			color: #F6A6AC;
		}

		.download-icon {
			width: 32rpx;
			height: 32rpx;
			margin-left: 12rpx;
		}
	}
</style>